import React, { PureComponent } from 'react';
import { Menu, Icon, Modal, Table, Pagination, Badge } from 'antd';
import { router, connect } from 'dva';
import styles from './index.less';

import Avatar from './AvatarDropdown';

const { Link } = router;
const { SubMenu } = Menu;

const columns = [
  {
    title: '事件类型',
    dataIndex: 'event_type',
    key: 'event_type',
  },
  {
    title: '事件内容',
    dataIndex: 'event_brief',
    key: 'event_brief',
  },
  {
    title: '事发时间',
    dataIndex: 'event_the_time',
    key: 'event_the_time',
  },
  {
    title: '上报时间',
    dataIndex: 'event_criminal',
    key: 'event_criminal',
  },
  {
    title: '发生地址',
    dataIndex: 'event_address',
    key: 'event_address',
  },
  {
    title: '来源',
    dataIndex: 'source',
    key: 'source',
    render: (text, record) => {
      return <span>{text == '城地公司' ? '市突发事件' : text}</span>;
    },
  },
];

// const data = [
//     {
//         "id": "97b77aeb056d420097136ebbce88741b",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "称晾衣杆掉在5楼的阳台上，担心会有掉下楼的风险，需要帮助，请民警到场处理。已通知消防\n(出动)",
//         "event_the_time": "2021-08-05 16:12:20",
//         "event_criminal": "2021-08-05 16:23:46",
//         "event_source": "",
//         "event_address": "长宁区 仙霞路750弄21号603室",
//         "area_id": "仙霞新村街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "95c697684fa246cd9658f5bb415c2137",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "因上次台风 导致1太阳能可能要掉落 恐有安全隐患  请民警到场处理。(消防共同接听)\n(出动)",
//         "event_the_time": "2021-08-05 12:00:01",
//         "event_criminal": "2021-08-05 12:08:47",
//         "event_source": "",
//         "event_address": "浦东新区 惠南镇福缘路169弄27号3楼的楼顶",
//         "area_id": "虹桥街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "cd0f9f09cdf64ff6b8c1347a23b9a895",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "雨棚被台风挂坏肯能掉落，请民警到场处理。\n(立案)",
//         "event_the_time": "2021-08-05 10:03:03",
//         "event_criminal": "2021-08-05 10:13:49",
//         "event_source": "",
//         "event_address": "长宁区 茅台路601弄9号401室",
//         "area_id": "仙霞新村街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "90e50b5e6689460585aecc2813042a76",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "长宁区 天山五村 34号201室发生一起火灾(出动)",
//         "event_the_time": "2021-08-05 09:32:27",
//         "event_criminal": "2021-08-05 09:33:48",
//         "event_source": "",
//         "event_address": "长宁区 天山五村 34号201室",
//         "area_id": "仙霞新村街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "aabe2ce0c41b40508dba91b02063e5b7",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "长宁区 长宁路 靠近 定西路 833公寓2203室发生一起抢险救援(出动)",
//         "event_the_time": "2021-08-04 23:29:31",
//         "event_criminal": "2021-08-04 23:33:46",
//         "event_source": "",
//         "event_address": "长宁区 长宁路 靠近 定西路 833公寓2203室",
//         "area_id": "华阳路街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "bf60d4c289624416a4baae320c2c8efb",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "长宁区 法华镇路 靠近 杨宅路 东北方向顶楼发生一起火灾(出动)",
//         "event_the_time": "2021-08-04 18:40:39",
//         "event_criminal": "2021-08-04 18:43:48",
//         "event_source": "",
//         "event_address": "长宁区 法华镇路 靠近 杨宅路 东北方向顶楼",
//         "area_id": "新华路街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "ff1407d5f84942d0b7427b650e58045b",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "报警人称没带钥匙 屋内有一个4岁小孩独自在家 需要开门 请民警到场处理。\n(到场)",
//         "event_the_time": "2021-08-04 12:00:42",
//         "event_criminal": "2021-08-04 12:08:46",
//         "event_source": "",
//         "event_address": "长宁区 茅台路455弄7号1104室",
//         "area_id": "仙霞新村街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "0f5b64707ac04d00be925cbd4325e3cc",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "称小孩的手被铁门卡了 自动中断 （已通知120，如民警到场确认无需救护车，请及时致电120或110）（消防共同接听）\n(返队)",
//         "event_the_time": "2021-08-04 09:11:38",
//         "event_criminal": "2021-08-04 09:18:49",
//         "event_source": "",
//         "event_address": "长宁区 中山西路1432弄26号底楼(虹南小区)",
//         "area_id": "虹桥街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "c6e9c5036de348149e5f9cf33647a9df",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "报警人称家中老人在上址7楼跳楼  现在跳到万科广场的平台上，人有受伤  ，家里人下去看情况了  请民警到场处理。（已通知120，如民警到场确认无需急救车，请自行致电120或110）\n(立案)",
//         "event_the_time": "2021-08-04 01:48:51",
//         "event_criminal": "2021-08-04 01:53:45",
//         "event_source": "",
//         "event_address": "长宁区 荣华西道19弄7号7号楼下  万科广场平台上",
//         "area_id": "虹桥街道",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     },
//     {
//         "id": "e2914c988a654b82b0b10cb46190c47f",
//         "event_title": "",
//         "event_type": "事故灾害",
//         "event_brief": "需要开锁，1老人（80岁左右）被困，请民警到场处理。(消防共同接听)\n(出动)",
//         "event_the_time": "2021-08-03 22:31:55",
//         "event_criminal": "2021-08-03 22:38:46",
//         "event_source": "",
//         "event_address": "长宁区 北虹路1000弄42号202室(天申小区)",
//         "area_id": "新泾镇",
//         "event_subordinate_unit": "",
//         "source": "城地公司",
//         "event_create_user": "数据同步",
//         "state": "1"
//     }
// ]

class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedKeys: this.getSelectedMenuKeys(),
      visible: false,
    };
    this.interval = 0;
  }

  componentDidMount() {
    this.queryDataList(1, 10);
    this.interval = setInterval(() => this.queryDataList(1, 10), 60000);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedKeys: this.getSelectedMenuKeys(nextProps),
      });
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  queryDataList = (current, pageSize) => {
    this.props.dispatch({
      type: `global/queryDataList`,
      payload: {
        current,
        pageSize,
        map: {
          type: '1',
        },
      },
    });
  };

  onChange = (current, pageSize) => {
    this.queryDataList(current, 10);
  };

  /**
   * 获取当前选中菜单项
   */
  getSelectedMenuKeys = props => {
    const {
      location: { pathname },
    } = props || this.props;
    return pathname;
  };

  handleClick = menuItem => {
    this.setState({
      selectedKeys: menuItem.key,
    });
  };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  renderNavMenuItems = (userMenus, menus = [], collapsed) => {
    if (userMenus && menus) {
      return menus.map(menu => {
        if (menu.routes) {
          if (
            menu.path &&
            !menu.hidden &&
            (!userMenus ||
              (menu.path && userMenus.filter(i => i.indexOf(menu.path) !== -1).length > 0))
          ) {
            return (
              <SubMenu
                key={menu.path}
                title={
                  <span>
                    <span>{menu.name}</span>
                  </span>
                }
              >
                {this.renderNavMenuItems(userMenus, menu.routes, collapsed)}
              </SubMenu>
            );
          }
        }
        if (menu.path && (!userMenus || (userMenus.length > 0 && userMenus.includes(menu.path)))) {
          return (
            <Menu.Item key={menu.path}>
              <Link to={menu.path ? menu.path : '/'}>
                <span>
                  <span>{menu.name}</span>
                </span>
              </Link>
            </Menu.Item>
          );
        }
      });
    }
  };

  render() {
    const { collapsed, userMenus, menus, global } = this.props;
    const { data = [], current = 1, pageSize = 10, total = 0 } = global;

    return (
      <div className={styles.global_header_wrapper}>
        <div className={styles.main}>
          <div className={styles.header_logo}>
            <div>
              <img className={styles.img} src="/icons/favicon-131x106.png" />
            </div>
            <div className={styles.title}>长宁区城市运行值守保障管理系统</div>
          </div>
          <div className={styles.header_menu_wrapper}>
            <Menu
              mode="horizontal"
              selectedKeys={[this.state.selectedKeys]}
              onClick={this.handleClick}
            >
              {this.renderNavMenuItems(userMenus, menus, collapsed)}
            </Menu>
          </div>
          <div className={styles.bellCss} onClick={this.showModal}>
            <Badge count={total}>
              <Icon type="bell" />
            </Badge>
          </div>
          <div className={styles.right}>
            <div>
              <Avatar />
            </div>
          </div>
        </div>

        <Modal
          className={styles.exportcss}
          // width={1300}
          title="突发信息"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Table
            rowKey={record => record.id}
            columns={columns}
            dataSource={data}
            rowClassName={styles.rowClassName}
            pagination={false}
          />
          <div style={{ margin: '16px 0' }}>
            <Pagination
              current={current}
              pageSize={5}
              defaultPageSize={5}
              total={total}
              showTotal={(total, range) => `共有 ${total} 条数据`}
              onChange={this.onChange}
            />
          </div>
        </Modal>
      </div>
    );
  }
}

export default connect(({ global }) => ({ global }))(Index);
